<template>
  <div>
    <div @mouseleave="hideOption" v-if="isShow" class="option-box">
      <div class="option-item" v-for="item in options" :key="item.key" @click="goToPage(item.key)">{{ item.name }}</div>
    </div>

    <!-- 年度计划 -->
    <data-list :istable="false" ref="dataList"></data-list>

    <!-- 报销 -->
    <reimbursement ref="reimbursement"></reimbursement>

    <!-- 工作追踪 -->
    <add-work ref="addWork" :isLeader="isLeader" @refresh="refresh"></add-work>

    <!-- 上报事件 -->
    <add-event ref="addEvent" @refresh="refresh"></add-event>

    <!-- 新增合同 -->
    <el-dialog title="起草" :visible.sync="contractDialog" width="860px" :close-on-click-modal="false" :close-on-press-escape="false">
      <div class="bg-contract" :class="statusCurrentKey == item.dictKey ? 'activity-chose' : ''" v-for="(item, index) in contractTypeOptionList" :key="index" @click="statusCurrentKey = item.dictKey">{{ item.dictValue }}</div>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="contractDialog = false">取消</el-button>
        <el-button size="small" type="primary" @click="confirmDialog">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
  import workTrace from '../../../mixin/workTrace';
  import dataList from '@/pages/businessPlan/pages/businessManagementOperation/components/dataList';
  import addWork from '@/pages/businessAssets/pages/workTrace/components/addWork.vue';
  import addEvent from '@/pages/businessAssets/pages/workTrace/components/addEvent.vue';
  import reimbursement from '@/pages/businessAssets/modeules/reimbursement';
  import { apiDictMoreList } from '../../../api/contract';

  export default {
    mixins: [workTrace],
    data() {
      return {
        isShow: false,
        contractDialog: false,
        statusCurrentKey: '',
        contractTypeOptionList: [],
        isLeader: localStorage.getItem('systemType'), //用于工作追踪
      };
    },
    methods: {
      //字典
      async getOptionList() {
        let res = await apiDictMoreList({
          dictTypeList: ['contractType', 'space_type'],
        });
        res.rows.forEach(item => {
          if (item.dictType == 'contractType') {
            this.contractTypeOptionList = item.dictList || [];
          }
        });
      },

      goToPage(key) {
        if (key === 'newJob') {
          this.$refs.addWork.init();
        } else if (key === 'eventReport') {
          this.$refs.addEvent.init();
        } else if (key === 'newMeetingMinutes') {
          this.addMeeting();
        } else if (key === 'initiateAnAnnualPlan') {
          this.$refs.dataList.editItem();
        } else if (key === 'reimbursement') {
          this.$refs.reimbursement.showFurther = true;
          this.$refs.reimbursement.init();
        } else if (key === 'addContract') {
          this.contractDialog = true;
          this.statusCurrentKey = '';
        }
      },

      //新建工作
      addMeeting() {
        let params = {
          name: 'trace-summary-info',
          query: {
            spaceKey: this.$route.query.spaceKey,
            headerName: '会议纪要',
          },
        };

        let router = this.$router.resolve(params);
        window.open(router.href, '_blank');
      },

      //新增合同
      confirmDialog() {
        let target = this.contractTypeOptionList.find(item => item.dictKey == this.statusCurrentKey);
        let pathUrl = {
          name: 'contract-create',
          query: {
            contractType: this.statusCurrentKey,
          },
        };
        if (target) pathUrl.query.contractCategory = target.bizType;
        let { href } = this.$router.resolve(pathUrl);
        window.open(href);
      },

      hideOption() {
        this.isShow = false;
      },

      //添加编辑工作后刷新 key有值代表是编辑后的
      refresh(key) {
        this.$emit('refresh', key);
      },
    },

    mounted() {
      this.getOptionList();
    },

    components: { dataList, reimbursement, addWork, addEvent },
  };
</script>

<style lang="scss" scoped>
  .option-box {
    min-width: 130px;
    position: absolute;
    right: 0;
    top: -40px;
    background: #ffffff;
    z-index: 99;
    padding: 10px 0;
    border-radius: 10px;
    box-shadow: 0px 6px 15px 0px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    .option-item {
      width: 100%;
      text-align: center;
      line-height: 35px;
    }
    .option-item:hover {
      background: #ecf5ff;
      color: #66b1ff;
    }
  }

  .bg-contract {
    width: 185px;
    padding: 10px 15px;
    border: 1px solid #f1f1f1;
    text-align: center;
    margin: 0 10px 15px 10px;
    float: left;
    cursor: pointer;
  }
  .activity-chose {
    color: #fff;
    background: #409eff;
    border: 1px solid #409eff;
  }
</style>
